<!--
 * @Descripttion: 今日劳动力作业概况
 * @version: 
 * @Author: ada.wu
 * @Date: 2025-06-25 23:48:14
 * @LastEditors: ada.wu
 * @LastEditTime: 2025-06-27 16:36:26
-->
<!-- css/amap.css -->

<head>
    <link rel="stylesheet" href="/assets/css/amap.css" media="all">
</head>
<style>
    .total-map {
        height: calc(100vh - 195px);
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div class="layuimini-title layui-font-20">
            <i class="layui-icon layui-icon-return anticon mr-1" id="backBtn"></i>
            <b class="mr-7">待完成计划 <span class="is-clcik">0</span></span></b>
            <b>对应路线 <span class="is-clcik">0</span></span></b>
        </div>
        <div class="section">
            <div class="view-map">
                <div class="total-map">
                    <div class="line-info">
                        <div class="line-info__item">
                            <div class="line planLine"></div>
                            <div class="info">计划路线</div>
                        </div>
                        <div class="line-info__item">
                            <div class="line finishLine"></div>
                            <div class="info">已完成路线</div>
                        </div>
                        <div class="line-info__item">
                            <div class="line processLine">
                                <img src="/assets/images/map/process.png" />
                            </div>
                            <div class="info">处理中路线</div>
                        </div>
                    </div>
                    <!-- 地图信息 -->
                    <div id="totalMapContainer" class="amap-container">
                    </div>
                    <!-- 全屏/退出全屏 -->
                    <!-- <div class="fullscreen" id="toggleFullscreen">
                        <i class="fullscreen-icon layui-icon layui-icon-screen-full"></i>
                    </div> -->
                    <div class="gird-select">
                        <h3 class="panel-title">
                            <img src="assets/images/map/check.png" width="16" />
                            作业网格
                        </h3>
                        <div class="panel-control">
                            <div class="panel-checkboxes" id="grid-checkboxes"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['form', 'miniPage', 'miniAMap'], function () {
        var $ = layui.$,
            element = layui.element,
            layer = layui.layer,
            util = layui.util,
            miniAMap = layui.miniAMap;

        /******************** 事件 start ********************/
        // 地图页面返回事件
        $('#backBtn').on('click', function () {
            miniPage.backPageCreate()
        });
        /******************** 事件 end ********************/


        // 初始化地图 
        let mapCenter = miniAMap.defaults.mapCenter; // 默认北京中心点
        let map = null
        map = miniAMap.render({
            containerId: 'totalMapContainer', options: {
                zoom: 14,
                center: mapCenter // 默认北京中心点
            }
        })
        //第1步 ： 获取中心点
        $.getJSON("api/amapProject.json", function (json) {
            if (json.code === 0) {
                const projectData = json.data[0];
                mapCenter = [projectData.longitude, projectData.latitude];
                //重新绘制中心点
                map = miniAMap.initMap('totalMapContainer', {
                    zoom: 14,
                    center: mapCenter
                })
                const points = JSON.parse(projectData.scopePoints); // 解析 scopePoints 为数组
                const polygon = miniAMap.createPolygon(points, {
                    strokeColor: projectData.color,
                    strokeWeight: 2,
                    fillColor: projectData.color,
                    fillOpacity: 0.4
                });
                // 初始添加到地图
                map.add(polygon);
                setAmapPolygon()

            } else {
                console.error("数据加载失败:", json.msg);
            }
        });

        //第2步 ： 绘制其他图形下拉框的数据
        function setAmapPolygon() {
            $.getJSON("api/amapPolygon.json", function (json) {
                if (json.code === 0) {
                    renderGridCheck(json.data);
                } else {
                    console.error("数据加载失败:", json.msg);
                }
            });
        }



        // 存储多边形对象
        const polygonObjects = {};
        function renderGridCheck(data) {
            const container = $('#grid-checkboxes');
            container.empty(); // 清空旧元素

            data.forEach(item => {
                const gridName = item.gridName;
                const color = item.color || '#8c8c8c';
                const points = JSON.parse(item.scopePoints); // 解析 scopePoints 为数组

                const checkboxId = `grid_${item.id}`;
                const checkboxHtml = `
                                    <div class="checkbox-item">
                                        <input type="checkbox" id="${checkboxId}">
                                        <label for="${checkboxId}">${gridName}</label>
                                    </div>`;
                container.append(checkboxHtml);
                const polygon = miniAMap.createPolyline(points, {
                    color: color,
                    isDashed: true
                });
                //默认加载数据方法 input 添加 checked 属性即可  <input type="checkbox" id="${checkboxId}" checked>
                // map.add(polygon);
                polygonObjects[checkboxId] = polygon;
                // 绑定复选框事件
                $(`#${checkboxId}`).on('change', function () {
                    console.log('绑定复选框事件===', polygon, this)
                    if (this.checked) {
                        map.add(polygon);
                    } else {
                        map.remove(polygon);
                    }
                });
            });
        }

    })
</script>